<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">编辑员工账号</h1>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>系统<span>/</span>员工列表</div>
        </div><!-- 页面头部 end -->

        <div class="main-content-body">
            <div class="edit-form">
                <el-form :model="manager" :rules="rules" ref="manager-form" label-width="100px" class="demo-ruleForm">
                    <h3 class="edit-form-title">账号信息</h3>
                    <el-form-item label="登录账号" prop="loginName">
                        <el-input v-model="manager.loginName" placeholder="登录账号最少5个字符"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="manager.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="manager.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="员工类型">
                        <el-radio-group v-model="manager.employeeType" @change="checkEmpType">
                            <el-radio v-for="employeeType in employeeTypeList" :key="employeeType.value"
                                      :label="employeeType.value">{{employeeType.name}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否接收消息" v-if="isShow">
                        <el-switch v-model="manager.receiveNotification"></el-switch>
                    </el-form-item>
                    <div class="edit-button-fixed">
                        <div class="edit-button z-yuan-butn">
                            <el-button type="primary" @click="handleSave">确定</el-button>
                            <el-button @click="handleCancel">返回</el-button>
                        </div>
                    </div>
                </el-form>

            </div>
        </div>
    </div>
</div>
</body>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            loading: false,
            employeeTypeList: [[${employeeTypeList}]],
            manager: [[${dto}]],
            isShow:false, //'是否接收消息'标签是否显示
            rules: {
                loginName: [
                    {required: true, message: "请输入登录账户", trigger: 'blur'},
                    {min:2, max:20, message: '账户长度2到20个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: "请输入姓名", trigger: 'blur'},
                    {max:20, message: '姓名最长20个字符', trigger: 'blur'}
                ],
                mobile: [
                    {required: true, message: "请输入手机号", trigger: 'blur'},
                    {pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/, message: '手机号格式有误', trigger: 'blur'}
                ]
            },
        },
        created: function () {
        },
        mounted: function () {
            let self = this;
            if(self.manager.employeeType==1 || self.manager.employeeType==3){
                self.isShow = true;
            }else{
                self.isShow = false;
            }
        },
        methods: {
            checkEmpType:function(cell){
                if(1==cell || 3==cell){
                    this.isShow = true;
                }else{
                    this.isShow = false;
                }
            },
            handleSave: function () {
                let self = this;
                self.$refs['manager-form'].validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        $.ajax({
                            url: "/vendor/vendormanager/edit",
                            type: "POST",
                            data: JSON.stringify(self.manager),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                self.loading = false;
                                if (data) {
                                    if (data.returnCode === 1) {
                                        self.$message({
                                            message: '编辑员工账号成功',
                                            type: 'success',
                                            customClass: 'message-center',
                                            duration: 1500,
                                            onClose: function () {
                                                window.location.href = "/vendor/vendormanager/tolist"
                                            }
                                        });
                                    } else {
                                        self.$message({
                                            message: data.returnNote,
                                            type: 'error',
                                            customClass: 'message-center',
                                            showClose: true,
                                            duration: 3000,
                                        });
                                    }
                                } else {
                                    self.$message({
                                        message: '编辑员工账号失败',
                                        type: 'error',
                                        customClass: 'message-center',
                                        duration: 1500,
                                    });
                                }
                            },
                            error: function () {
                                self.loading = false;
                                self.$message({
                                    message: '出错了，请请稍后再试或联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                            }
                        });
                    }
                });
            },
            handleCancel: function () {
                window.location.href = "/vendor/vendormanager/tolist"
            }
        }

    });

</script>
</html>